import { useState } from "react";

const Demo1 = () => {
  const [count, setCount] = useState(1);

  const handleClick = () => {
    setCount(count => count + 1);
    setCount(count => count + 1);
    setCount(count => count + 1);

    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Demo</h1>
      <div>
        <h3>count: {count}</h3>
        <button onClick={() => handleClick()}>点我</button>
      </div>
    </div>
  );
};

export default Demo1;

/**
 * 1. React hooks 有哪些？
 * useState
 *    用来定义函数组件的内部状态
 *    [value, setValue] = useState(初始值)
 *    value 用来存储状态的， 初始接受初始值
 *    setValue用来修改状态， 可以接受新值替换旧值
 *    setValue也可以传函数,  函数的返回值会替换旧值(注意： 函数会和队列的形式一样， 挨个出来执行)
 * 
 *    初始值 => 也可以是函数， 获取的函数的返回值
 *    setValue本身是异步执行的， react在合适的时候， 才会执行函数
 * useEffect
 * useMemo
 * useCallback
 * useRef
 *
 */
